<template>
  <div class="scattergram">
    <div class="scattergram-tabs">
      <span class="active">工程地区分散图</span>
    </div>
    <div id="scattergram-content" />
  </div>
</template>

<script>
import axios from 'axios'
import Global from '../../utils/Global.js'
import echarts from 'echarts'
import '@/utils/china.js'
const uplodadUrl = Global.uplodadUrl
export default {
  data() {
    return {
      echartsData: []
    }
  },
  mounted() {
    this.GetStatisticalDataGroupByProjectLocation()
  },
  methods: {
    GetStatisticalDataGroupByProjectLocation() {
      const _this = this
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetStatisticalDataGroupByProjectLocation`
      }).then((res) => {
        console.log(res, '工程分布图')
        _this.echartsData = [] // 清空
        res.data.data.forEach(item => {
          const obj = {}
          obj.name = item.xiangmszs
          obj.value = item.zongsl
          obj.money = item.zongje
          _this.echartsData.push(obj)
        })
        console.log(_this.echartsData, '处理后工程分布图数据')
        _this.drawEcharts()
      })
    },
    // 工程地区分散图
    drawEcharts() {
      const _this = this
      const myChart3 = echarts.init(document.getElementById('scattergram-content'))
      // 绘制图表
      myChart3.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // console.log(params)
            return `<div style="width:112px;height:74px;background:#000000;border-radius:2px;opacity:0.7315;position:relative;padding:9px 10px 9px 25px">
            <div style="width: 7px;height:7px;background:#fcf2a9;border-radius:2px;position:absolute;top:15px;left:12px">
            </div>
            <div style="height: 18px;font-size:14px;font-weight:500;color:#fff;line-height:18px;">${params.data.name}</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">数量：${params.data.value}个</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">金额：${params.data.money}亿</div>
          </div>`
          }
        },
        visualMap: {
          name: '数值范围',
          min: 0,
          max: 30,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#fcf2a9', 'yellow', '#f18e74']
          }
        },
        series: [{
          type: 'map',
          mapType: 'china', // 自定义扩展图表类型
          label: {
            show: false
          },
          data: _this.echartsData
        }]
      })
    }
  }

}

</script>
<style lang="scss" scoped>
  .scattergram {
    width: 100%;
    height: 386px;
    margin-top: 5px;
    background: #FFFFFF;

    .scattergram-tabs {
      border-bottom: 1px solid #1468B7;
      padding-top: 7px;
      padding: 10px;

      span {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
        line-height: 22px;
        cursor: pointer;

      }

      .active {
        color: #333;
        font-weight: 600;
      }
    }

    #scattergram-content {
      width: 100%;
      height: 305px;
    }

  }

</style>
